<template>
    <div class="content-output">
        <template v-if="output.type === 'text'">
            <el-tag v-if="outputTagColor" :color="outputTagColor" style="margin-right:10px"
                >{{ output.status }}
            </el-tag>
            <span v-if="output.type === 'text'" class="tell-content"  v-html="tellUrl(output.text)" />
        </template>
        <component
        :is="output.component"
        v-if="output.type === 'component'"
        v-bind="output.props ?? {}"
        />
    </div>
</template>
  
<script lang='ts'>
import { computed, defineComponent, reactive, ref, toRefs } from 'vue';
import type { PropType } from 'vue';
import { tellUrl } from '@/utils/util';
import OutputType = xpTerminal.OutputType;
export default defineComponent({
    name:'contentOutput',
    props: {
        output:{
            type:Object as PropType<OutputType>,
            default:null
        }
    },
    components: {
    },
    emits:[],
    setup (props, context) 
    {
        let data = reactive({
        });
        let methods = {
        };
        const outputTagColor = computed((): string => 
        {
            if (!props.output.status) 
            {
                return '';
            }
            switch (props.output.status) 
            {
                    case 'info':
                        return '#a6a6a6';
                    case 'success':
                        return '#00a870';
                    case 'warning':
                        return '#ebb105';
                    case 'error':
                        return '#e34d59';
                    default:
                        return '';
            }
        });

        return { 
            ...toRefs(data),
            ...methods,
            outputTagColor,
            tellUrl
        };
    }
});
</script>
  
<style scoped lang="scss">
:deep(.el-tag__content) {
    color: #fff;
    font-size: 16px;
    line-height: 1.2;
}

.tell-content {
    // display: inline-block;
    width: 100%;
    word-wrap: break-word;
    white-space: normal;
}
</style>
  